<template>
  <div class="charts-container">
    <el-row>
      <el-col :span="12" class="charts-box" style="border-bottom: 0">
        <echart-component echartType="scatter" :chartData="chartDatas"></echart-component>
      </el-col>
      <el-col :span="12" class="charts-box" style="border-bottom: 0">
        <echart-component echartType="line" :chartData="chartDatas"></echart-component>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="charts-box">
        <echart-component :chartData="chartDatas"></echart-component>
      </el-col>
      <el-col :span="12" class="charts-box">
        <echart-component echartType="scatter" :chartData="chartDatas"></echart-component>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { chartData } from '@/api/search'
import echartComponent from './echart-component.vue'
import { ref } from 'vue'
defineOptions({ name: 'HistoGram' })
const chartDatas = ref([])
const getComprehensive = async function () {
  try {
    const response = await chartData()
    chartDatas.value = response.data
  } catch (error) {
    console.log('error: ', error)
  }
}
getComprehensive()
</script>

<style lang="scss" scoped>
.charts-container {
  background: #fff;
}
.charts-box {
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.charts-box:nth-child(1) {
  border-right: 0;
}
.charts-border {
  border-bottom: 1px dotted #666;
  margin-bottom: 30px;
}
</style>
